<template>
  <div v-show="props.compType === 'dialogList'">
    <!-- <el-form-item label="字段名">
      <el-input class="input" v-model="props"></el-input>
    </el-form-item> -->
    <el-form-item label="ID" >
      <el-tooltip class="item" effect="dark" content="请注意,ID的修改可能会导致该组件相关事件失效！" placement="left">
        <el-input class="input" v-model="props.id" ></el-input>
      </el-tooltip>
    </el-form-item>
    <el-form-item label="标题" >
      <el-input class="input" v-model="props.label"></el-input>
    </el-form-item>
    <el-form-item label="栅格" >
      <el-input-number v-model="props.span"  :min="1" :max="24"/>
    </el-form-item>
    <el-form-item label="标签宽度">
      <el-input-number v-model="props.labelWidth"  :min="1" :max="200"></el-input-number>
    </el-form-item>
    <el-form-item label="显示标签">
      <el-switch v-model="props.showLabel"></el-switch>
    </el-form-item>
    <el-form-item label="禁用" >
      <el-switch v-model="props.disabled"></el-switch>
    </el-form-item>
    <el-form-item label="默认值" >
      <el-input class="input" v-model="props.value"></el-input>
    </el-form-item>
    <el-form-item label="请求地址">
        <el-input v-model="props.action"></el-input>
    </el-form-item>
    <el-form-item label="标题">
        <el-input v-model="props.title"></el-input>
    </el-form-item>
    <el-form-item label="多选">
        <el-switch v-model="props.multi"></el-switch>
    </el-form-item>
    <el-form-item label="显示序号">
        <el-switch v-model="props.showIndex"></el-switch>
    </el-form-item>
    <el-form-item label="字段值">
        <el-input v-model="props.dval"></el-input>
    </el-form-item>
    <el-form-item label="字段名称">
        <el-input v-model="props.dlabel"></el-input>
    </el-form-item>
    <el-divider>字段配置</el-divider>
      <el-table
        :data="colOptions"
      >
        <el-table-column property="label"  label="字段" align="center" />
        <el-table-column property="property"  label="属性"  align="center" />
        <el-table-column property="width"  label="宽度"  align="center" width="70" />
        <el-table-column label="操作">
          <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index)"
            type="text"
            size="small">
            移除
          </el-button>
        </template>
        </el-table-column>
      </el-table>
    <br/>
    <el-alert title="字段和属性不能为空,请检查" v-show="alertShow" type="error" :closable="false"/>
    <br>
    <el-form-item label="字段" label-width="60px">
        <el-input v-model="dLabel" />
    </el-form-item>
    <el-form-item label="属性" label-width="60px">
        <el-input v-model="dProperty"/>
    </el-form-item>
    <el-form-item label="宽度" label-width="60px">
        <el-input-number v-model="dWidth" />
    </el-form-item>
    <div style="margin-left: 20px;">
      <el-button
        style="padding-bottom: 0"
        icon="el-icon-circle-plus-outline"
        type="text"
        @click="addColItem"
      >
        添加选项
      </el-button>
    </div>
  </div>
</template>
<script>
import fancyText from '../../extend/fancyText.vue';
/**
 * text的配置项
 */
export default {
  components: { fancyText },
  name:"textConfig",
  props:{
    props:{}
  },
  data(){
    return {
      colOptions:[],
      dLabel:'',
      dProperty:'',
      dWidth:150,
      alertShow:false
    }
  },
  methods:{
    addColItem(){
      const obj = {};
      if(this.dLabel!==''&&this.dProperty!==''){
        this.alertShow = false;
        obj.label = this.dLabel;
        obj.property = this.dProperty;
        obj.width = this.dWidth;
        this.colOptions.push(obj);
        this.resetFields();
      }else{
        this.alertShow = true;
      }
    },
    resetFields(){
      this.dLabel = '';
      this.dProperty = '';
      this.dWidth = 150;
    },
    deleteRow(index){
      this.colOptions.splice(index,1);
    }
  },
  mounted() {
    this.$nextTick(()=> {
      this.colOptions = this.colOptions.concat(JSON.parse(this.props.colConf));
    })
  },
  watch:{
    'colOptions'(newVal){
      this.props.colConf = JSON.stringify(newVal);
    }
  }
}
</script>
